@import 'table.scss';
@import 'swiper.scss';


.page-coal-shed .shebei-txt {
    height: 30px;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    padding-left: 12px
}

.page-coal-shed .un {
    color: #00fcff
}

.page-coal-shed .video-box {
    width: 100%;
    height: 100%;
    background: #02090c;
    font-size: 40px;
    font-weight: 300;
    color: rgba(255, 255, 255, .2);
    font-family: cursive;
    position: relative
}

.page-coal-shed .video-box img {
    width: 100%;
    height: 100%
}

.page-coal-shed .left-section {
    width: 22%;
    height: 100%;
    overflow: hidden
}

.page-coal-shed .left-section .card-content {
    padding: 0 7px;
    width: 100%;
    height: calc(100% - 45px);
    overflow: hidden
}

.page-coal-shed .left-section .card1 {
    padding: 0 4px;
    width: 100%;
    height: calc(33.8% - 10px);
    margin-bottom: 10px;
    background: url(../img/bg-mini-card.png) left top no-repeat;
    background-size: 100% 100%;
    display:flex;
    flex-direction: column;
    padding-bottom:10px;
}

.page-coal-shed .left-section .card1 .txt {
    width: 100%;
    height: 65px;
    font-size: 4px;
    font-weight: 200;
    color: #fff;
    line-height: 20px;
    margin-left: 4px;
    padding: 0 4px;
    text-align:justify;
    padding:0 10px;
}
.page-coal-shed .left-section .card1 .info{
    flex-grow: 1;
}
.page-coal-shed .left-section .card1 .flex {
    justify-content: space-around
}

.page-coal-shed .left-section .card1 .acreage {
    display: flex;
    width: 160px;
    height: 20px;
    font-size: 12px;
    font-weight: 200;
    color: #fff;
    line-height: 20px;
    justify-content: space-between
}

.page-coal-shed .left-section .card1 .person {
    display: flex;
    width: 150px;
    height: 20px;
    font-size: 12px;
    font-weight: 200;
    color: #fff;
    line-height: 20px;
    justify-content: space-between
}

.page-coal-shed .left-section .card1 .img-txt {
    margin-left: 8px;
    width: 56px;
    height: 20px;
    font-size: 14px;
    font-weight: 300;
    color: #00fcff;
    line-height: 20px
}

.page-coal-shed .left-section .card1 .label {
    width: 58px;
    height: 20px;
    font-weight: 200;
    color: #c8c8c8;
    line-height: 20px;
    text-align: center;
    margin-top: 4px;
    font-size: 12px;
}

.page-coal-shed .left-section .card1 .footer-li {
    margin-top: 8px
}

.page-coal-shed .left-section .card1 .footer-li .inline {
    margin-left: 10px;
    color: #4ee000
}

.page-coal-shed .left-section .card2 {
    width: 100%;
    height: calc(33.8% - 10px);
    margin-bottom: 10px;
    background: url(../img/bg-mini-card.png) left top no-repeat;
    background-size: 100% 100%
}

.page-coal-shed .left-section .card3 {
    width: 100%;
    height: calc(33.8% - 10px);
    margin-bottom: 10px;
    background: url(../img/bg-mini-card.png) left top no-repeat;
    background-size: 100% 100%
}

.page-coal-shed .content-section {
    display: flex
}

.page-coal-shed .center-section {
    position: relative;
    width: 54%;
    height: 100%;
    margin-left: 10px;
    padding: 10px;
    border: 1px solid #034057
}

.page-coal-shed .center-section .video-box {
    width: 100%;
    background: url(../img/beijing-zhong.png)  no-repeat 0px 0px;
    background-size: 100% 100%
}
.page-coal-shed .center-section .video-box div span{
    display: inline-block;
    position: absolute;
}
.page-coal-shed .center-section .video-box div span.gong{
    cursor: pointer;
    width: 66px;
    height: 100px;
    background-size: 100% 100%;
}
.page-coal-shed .center-section .video-box .fang1{
    top: 5%;
    left: 30%;
    background: url(../img/fang.png) no-repeat;
}
.page-coal-shed .center-section .video-box .meip,.page-coal-shed .center-section .video-box .meip2{
  
    height: 25px;
    width: 64px;
    line-height: 25px;
    text-align: center;
    top:calc(5% + 25px);
    left: calc(30% + 66px);
    font-size: 12px;
    font-weight: 400px;
    color: #5CFF81;
    cursor: pointer;
    background-color: rgba(3, 64, 87, 0.7);

}


.meip span,.meip2 span{
    width: 100%;
    position: relative !important;
}

.meip::after,.meip2::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 5px;
    border-top:1px solid #5CFF81;
    border-left: 1px solid #5CFF81;;
    border-radius:1px;
}
.meip::before,.meip2::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 5px;
    border-top:1px solid #5CFF81;
    border-right: 1px solid #5CFF81;;
    border-radius: 1px;
}
.meip span::after,.meip2 span::after{
    content: "";
    position: absolute;
   bottom:15px;
    left: 0;
    width: 5px;
    height: 5px;
    border-bottom:1px solid #5CFF81;
    border-left: 1px solid #5CFF81;;
    border-radius:1px;
}
.meip span::before,.meip2 span::before{
    content: "";
    position: absolute;
    bottom: 15px;
    right: 0;
    width: 5px;
    height: 5px;
    border-bottom:1px solid #5CFF81;
    border-right: 1px solid #5CFF81;;
    border-radius: 1px;
}
.page-coal-shed .center-section .video-box .wu1{
    top: 20%;
    left: 40%;
    background: url(../img/wupaot-icon.png) no-repeat;
}
.page-coal-shed .center-section .video-box div span.tong1{
    width: 42px;
    height: 86px;
    top: 28%;
    left: 34%;
    background: url(../img/tong-xun.png) no-repeat;
}
.page-coal-shed .center-section .video-box .fang2{
    top: 43%;
    left: 38%;
    background: url(../img/fang.png) no-repeat;
}
.page-coal-shed .center-section .video-box .meip2{
    top:calc(43% + 25px);
    left: calc(38% + 66px);
}
.page-coal-shed .center-section .video-box .wu2{
    top: 62%;
    left: 38%;
    background: url(../img/wupaot-icon.png) no-repeat;
}
.page-coal-shed .center-section .video-box div span.tong2{
    width: 42px;
    height: 86px;
    top: 75%;
    left:43%;
    background: url(../img/tong-xun.png) no-repeat;
}
.page-coal-shed .center-section:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-left: 2px solid #00f1ff;
    border-top: 2px solid #00f1ff;
    content: ""
}

.page-coal-shed .center-section:after {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid #00f1ff;
    border-top: 2px solid #00f1ff;
    content: ""
}

.page-coal-shed .center-section-footer:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-left: 2px solid #00f1ff;
    border-bottom: 2px solid #00f1ff;
    content: ""
}

.page-coal-shed .center-section-footer:after {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid #00f1ff;
    border-bottom: 2px solid #00f1ff;
    content: ""
}

.page-coal-shed .right-section {
    width: calc(28% - 30px);
    margin-left: 10px;
    height: 100%
}

.page-coal-shed .right-section .card4 {
    width: 100%;
    height: calc(50% - 10px);
    margin-bottom: 10px;
    background: url(../img/out-and-in.png) left top no-repeat;
    background-size: 100% 100%
}

.page-coal-shed .right-section .card5 {
    width: 100%;
    height: 50%;
    background: url(../img/out-and-in.png) left top no-repeat;
    background-size: 100% 100%
}

.page-coal-shed .right-section .content-body {
    width: 100%;
    height: calc(100% - 30px)
}

.page-coal-shed .right-section .content-body .bottom-chart,
.page-coal-shed .right-section .content-body .top-chart {
    height: 50%;
    width: 100%;
    position: relative
}

.page-coal-shed .right-section .content-body .top-echatrs {
    width: 100%;
    height: 100%
}

.page-coal-shed .right-section .content-body .select-box {
    position: absolute;
    width: 130px;
    height: 24px;
    top: 2px;
    left: 12px;
    z-index: 19
}

.page-coal-shed .right-section .content-body .j-select-box {
    min-width: 100px;
    width: 100px
}

.page-coal-shed .right-section .content-body .j-select-box .j-select {
    background: 0 0
}

.page-coal-shed .right-section .content-body .j-select-box .j-select:after {
    background: url(../img/select-down.png) center 65% no-repeat
}

.page-coal-shed .right-section .content-body .j-select-box li {
    text-align: left
}

.page-coal-shed .right-section .content-body .result {
    position: absolute;
    top: 30px;
    left: 12px;
    z-index: 9;
    font-size: 12px
}

.page-coal-shed .right-section .content-body .result .unit {
    color: rgba(255, 255, 255, .5)
}
#iframe{
    width: 100%;
    border: none;
    height: calc(100% - 36px);
}